<template>
    <div>
        <button :class="{ active: currName == name }" v-for="name in names" @click="changeTab(name)" :key="name">
            {{ name }}
        </button>
        <KeepAlive include="left,center">
            <component :is="currName"></component>
        </KeepAlive>
    </div>
</template>
<script>
import AppLeft from './components/AppLeft.vue';
import AppRight from './components/AppRight.vue';
import AppCenter from './components/AppCenter.vue';

export default {
    data() {
        return {
            names: ['AppLeft', 'AppCenter', 'AppRight'],
            currName: 'AppLeft'
        };
    },
    methods: {
        changeTab(name) {
            this.currName = name; // 当前选项卡名称赋值给currName
        }
    },
    components: { AppLeft, AppCenter, AppRight }
}
</script>

<style scoped>
.active {
    color: red;
}
</style>